<template>
  <div class="box">
    <h3>儿子小明: 有存款: {{ money }}</h3>
    <button @click="sonMoney($parent)">给BABA钱: 50</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const money = ref(20000)
const sonMoney=(parent:any)=>{
  parent.money+=50,
  money.value-=50
}

// const giveMoney = (parent: any) => {
//   // 父亲的钱增多
//   console.log(parent)
//   console.log(parent.money)
//   parent.money += 50
//   // 自己的钱减少
//   money.value -= 50
// }
// 组件的数据不能随便被其他组件拿到,只有在当前组件允许的情况下可以被其他组件获取到
// defineExpose 就是在告诉外部,这个数据是可以被外部获取的
defineExpose({
  money
})
</script>
